<template>
  <DetailContainer class="app-container">
    <div slot="top">
      <div class="form-detail card whiteBox">
        <div class="cardHeader noborder" style="padding: 10px; font-size: 16px">
          <el-button
            icon="el-icon-arrow-left"
            size="mini"
            circle
            @click="$router.back()"
          ></el-button>
          {{ "出库单详情" }}
          <div style="float: right">
            <el-button type="primary" @click="handleUpdate(form)"
              >{{ $t('common.edit') }}</el-button
            >
            <el-button type="primary" size="small" @click="overSeaVisible = true" style="margin-right: 10px">{{ $t("order.overseaSubmit") }}</el-button>
          </div>
        </div>
        <div style="padding: 0 10px">
          <el-form
            ref="ruleForm"
            :model="form"
            label-position="left"
            label-suffix=":"
          >
            <el-row :gutter="20">
              <el-col
                v-for="(item, index) in topColumn"
                :key="index"
                :xs="24"
                :sm="item.col"
                :md="item.col"
                :lg="item.col"
                :xl="item.col"
              >
                <FormComponents :item-obj="item" :form="form" :isedit="false" />
              </el-col>
            </el-row>
          </el-form>
        </div>
        <StepsNew
          :label="statusList"
          class="status-steps"
          :status="status"
          :postMethod="'put'"
          :disable="true"
          :nodeUrl="'/wms/omsOrderShop'"
          @refresh="getDetailData"
          style="border-top: 1px solid #dcdfe6; padding: 10px 10px"
        />
      </div>
    </div>
    <div slot="info" style="margin-top: 10px">
      <InfoContainer>
        <template slot="info-left">
          <LeftInfo :ruleFrom="form" :id="form.orderId" />
        </template>
        <template slot="info-right"> </template>
      </InfoContainer>
    </div>
    <div slot="bottom" style="margin-top: 10px">
      <DetailTabList
        ref="DetailBody"
        :ruleFrom="form"
        @refresh="getDetailData"
      />
      <!-- 海外收款确认 -->
      <el-dialog :title="$t('common.overSeaVisible')" :visible.sync="overSeaVisible" class="el-dialog-normal">
        <el-form ref="overSeaRuleForm" :model="overSeaRuleForm" label-position="left" label-suffix=":" label-width="100px">
          <el-row :gutter="20">
            <el-col v-for="(item, index) in overSeaColumns" :key="index" :xs="24" :sm="item.col" :md="item.col" :lg="item.col"
              :xl="item.col">
              <FormComponents :item-obj="item" :form="overSeaRuleForm" :isedit="true">
                <template slot="fileList">
                  <UploadList v-model="overSeaRuleForm.files" />
                </template>
              </FormComponents>
            </el-col>
          </el-row>
        </el-form>
        <div class="foot-fixed-total" style="margin: 12px">
          <el-button @click="overSeaVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="primary" @click="overSeaSubmit">{{
            $t("common.confirm")
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </DetailContainer>
</template>

<script>
import { getWmsShipmentOrder } from "@/api/wms/shipmentOrder";
import DetailTabList from "./components/detailTabList.vue";
import DetailContainer from "@/components/Common/detail-container/detail-container.vue";
import InfoContainer from "@/components/Common/detail-container/info-container.vue";
import FormComponents from "@/components/FormComponents/index.vue";
import StepsNew from "@/components/StepsNew/index.vue";
import RightInfo from "./components/rightInfo.vue";
import LeftInfo from "./components/leftInfo.vue";
import UploadList from '@/components/FileUpload/index.vue'
import { changeStatus } from "@/api/order/index.js";

export default {
  props: {},
  components: {
    DetailTabList,
    DetailContainer,
    InfoContainer,
    StepsNew,
    FormComponents,
    LeftInfo,
    RightInfo,
    UploadList
  },
  data() {
    return {
      ids: [],
      // 表单参数
      form: {
        details: [],
        fromType: 1,
      },

      topColumn: [
        { prop: "customerId", label: this.$t('common.customer'), type: "input", col: 6 },
        { prop: "warehouseId", label: "仓库", type: "input", col: 6 },
        { prop: "rackName", label: this.$t('common.container'), type: "input", col: 6 },
        { prop: "orderNo", label: this.$t('order.orderNo'), type: "input", col: 6 },
        { prop: "orderAddress", label: "送货地址", type: "input", col: 6 },
        { prop: "overseasAmount", label: this.$t('common.overseaAmount'), type: "input", col: 6 },
        { prop: "remark", label: this.$t('common.remark'), type: "input", col: 6 },
      ],
      statusList: [
        {
          value: 0,
          label: this.$t('inbound.statusList.Unshipped'),
          status: 0,
          data: { status: 0 },
        },
        {
          value: 2,
          label: "部分发货",
          status: 2,
          data: { status: 2 },
        },
        {
          value: 3,
          label: "已发货",
          status: 3,
          data: { status: 3 },
        },
      ],
      status: 0,
      // 海外收款确认
      overSeaVisible: false,
      overSeaRuleForm: {},
      overSeaColumns: [
        {
          prop: "overseasAmount",
          label: this.$t("order.amountCollected"),
          type: "input",
          col: 24,
        },
        {
          prop: "fileList",
          slot: "fileList",
          label: this.$t("order.receiptVoucher"),
          type: "fileList",
          col: 24,
        },
      ]
    };
  },
  watch: {
    "form.customerId": {
      immediate: true,
      handler(value) {
        if (value) {
          this.hasCustomer = true;
        } else {
          this.hasCustomer = false;
        }
      },
    },
  },
  computed: {
    isEdit() {
      const bool = this.$route.query.isEdit;
      return bool;
    },
    isFinishStatus() {
      const bool = this.$route.query.isFinish;
      return bool;
    },
  },
  created() {
    const { id } = this.$route.query;
    if (id) {
      this.getDetailData(id);
    } else {
      this.reset();
    }
  },
  methods: {
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id || this.ids;
      // 入库完成状态
      let finish;
      if (row.shipmentOrderStatus === 13) {
        finish = true;
      }
      this.$router.push({
        path: "/wms/shipmentOrder/edit",
        query: { id, isEdit: true, isFinish: finish },
      });
    },
    getDetailData(id) {
      getWmsShipmentOrder(id).then((response) => {
        const { details, items } = response;
        let fromType = items && items.length === 0 ? 2 : 1;
        const map = {};
        (items || []).forEach((it) => {
          map[it.id] = it;
        });
        details && details.forEach((it) => (it.prod = map[it.itemId]));
        this.form = {
          ...response,
          fromType: fromType,
          details,
        };
      });
      this.$nextTick(()=>{
        this.$refs.DetailBody.getList()
      })
    },
    overSeaSubmit() {
      const files =  JSON.stringify(this.overSeaRuleForm.files)
      const params = { payStatus: 'NORMAL', id: this.form.orderId, ...this.overSeaRuleForm, files: files }
      // console.log('params', params)
      // return
      changeStatus({...params}).then(res=>{
        if(res) {
          this.$message({
            type: 'success',
            message: this.$t('common.succcessInfo')
          });
        }
      })
      this.overSeaVisible = false
    },
  },
};
</script>
<style lang="stylus">
.shipment-order-edit-wrapper {
  .shipment-order-content {
    width: 70%;
    min-width: 900px;
    margin: 0 auto;
  }
}
</style>
